<template>
  <div
    :class="[`${classPrefix}`, 
              noHover && `${classPrefix}--no-hover`,
              noBorder && `${classPrefix}--no-border`,
              noElevate && `${classPrefix}--no-elevate`]"
  >
    <div :class="[`${classPrefix}__header`]" v-if="showHeader">
      <slot name="header">
        <div :class="[`${classPrefix}__header-title`]" :title="title">{{title}}</div>
        <div :class="[`${classPrefix}__header-extra`]">
          <slot name="extra"></slot>
        </div>
      </slot>
    </div>
    <div :class="[`${classPrefix}__body`]" :style="bodyStyle">
      <slot></slot>
    </div>
    <div :class="[`${classPrefix}__footer`]" v-if="showFooter">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
import Config from "/src/config";
export default {
  name: "Card",
  props: {
    title: String,
    noBorder: Boolean,
    noHover: Boolean,
    noElevate: Boolean,
    bodyPadding: [String, Number],
  },
  data() {
    return {
      classPrefix: Config.classPrefix + "-card",
    };
  },
  computed: {
    showHeader() {
      return this.title || this.$slots.header;
    },
    showFooter() {
      return this.$slots.footer;
    },
    bodyStyle() {
      return { padding: parseFloat(this.bodyPadding) + "px" };
    },
  },
};
</script>
